<template>
    <div class="main-box">
        <div class="top">
            <Tem style="height: 100%" />
        </div>
        <div class="banner">
            <div class="ban-item" @click="changeTem(item.type)" v-for="item in temList" :key="item.type">AAA</div>
        </div>
    </div>
</template>

<script>
import Tem from './template1';

export default {
    components: {
        Tem,
    },
    data() {
        return {
            temList: [{ type: '3-2' }, { type: '2-2' }, { type: '2-1' }],
        };
    },
    methods: {
        changeTem(temType) {
            this.$store.state.temType = temType;
            console.log(this.$store.state.temType);
        },
    },
};
</script>

<style lang="scss" scoped>
.top {
    width: 80%;
    height: 65%;
    margin: 0 auto;
    border: 1px solid #ccc;
}
.banner {
    width: calc(100% - 310px);
    height: 200px;
    border: 1px solid #ccc;
    position: fixed;
    bottom: 10px;
    overflow-x: scroll;
    white-space: nowrap;
    padding: 20px;
    background: rgba($color: rgb(0, 0, 0), $alpha: 0.1);
    .ban-item {
        display: inline-block;
        box-sizing: border-box;
        background: lemonchiffon;
        border: 1px solid springgreen;
        height: 100%;
        width: 200px;
        margin-right: 20px;
    }
}
</style>
